<template>
  <div class="w content">
    <!-- 无数据 -->
    <div v-if="questionAnser.length === 0" class="w-100% mt50">
      <svg-icon name="msg" class="svg" width="150px" height="150px"></svg-icon>
      <span class="f-c-c mt-5 color-#909399">本系统已接入讯飞星火大模型~</span>
    </div>
    <div
      class="main-content"
      v-for="item in questionAnser"
      :key="item.uuid"
      v-else
    >
      <div class="question-item">
        <div class="img">
          <Avatar :size="30" :src="userStore.avatar" />
        </div>
        <div class="question">
          <div class="username">{{ userStore.username }}</div>
          <div class="question-content">
            <p>{{ item.question }}</p>
          </div>
        </div>
      </div>
      <div class="answer-item">
        <div class="img">
          <img src="/favicon.ico" width="30" height="30" />
        </div>
        <div class="answer">
          <div class="username">AI</div>
          <div class="answer-content">
            <p>{{ item.answer }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom w">
      <div class="send-msg">
        <el-input
          class="send-msg-input"
          v-model="msg"
          type="textarea"
          :autosize="{ minRows: 3 }"
          placeholder="快来向我提问吧~"
        ></el-input>
        <el-button
          class="send-msg-btn"
          type="primary"
          :disabled="msg === '' || sendMsgDisabled"
          :loading="sendMsgLoading"
          size="large"
          @click="sendMsg()"
        >
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar/index.vue'
import useUserStore from '@/store/modules/user'
import useWebsocket from '@/hooks/useWebsocket'
import { reqSendMsg } from '@/api/ai'
import { nanoid } from 'nanoid'

interface QuestionAnswer {
  question: string
  answer: string
  time: number
  uuid: string
}

let sendMsgDisabled = ref<boolean>(false)
let sendMsgLoading = ref<boolean>(false)
let userStore = useUserStore()
let msg = ref<string>('')
let questionAnser = ref<QuestionAnswer[]>([])

const getWsMsg = (data: any) => {
  const response = JSON.parse(data)
  if (response.code === 1) {
    sendMsgDisabled.value = false
    sendMsgLoading.value = false
    msg.value = ''
    return
  }
  for (let item of questionAnser.value) {
    if (item.uuid == uuid) {
      item.answer += response.msg
      return
    }
  }

  // questionAnser.value[timer].answer += data
}

let uuid = ''
const sendMsg = async () => {
  sendMsgDisabled.value = true
  sendMsgLoading.value = true

  let timer = new Date().getTime()
  uuid = nanoid()
  questionAnser.value.push({
    question: msg.value,
    answer: '',
    time: timer,
    uuid,
  })
  await reqSendMsg(msg.value)
}

useWebsocket(
  `${import.meta.env.VITE_SERVE.replace('http', 'ws')}/ai-ws/${
    userStore.token
  }`,
  getWsMsg,
)
</script>

<style lang="scss" scoped>
.content {
  overflow: hidden;
  min-height: calc(100vh - 50px - 40px - v-bind('userStore.headerWidth'));
  position: relative;
  .main-content {
    margin: 20px 0;
    .question-item {
      margin-bottom: 20px;
      display: flex;
      .img {
        margin-right: 15px;
      }
      .question {
        width: 100%;
        .username {
          font-weight: 600;
        }
        .question-content {
          margin-top: 5px;
          line-height: 24px;
          word-wrap: break-word;
          p {
            margin-bottom: 10px;
          }
        }
      }
    }
    .answer-item {
      padding-bottom: 20px;
      display: flex;
      .img {
        padding-top: 20px;
        margin-right: 15px;
      }
      .answer {
        padding: 20px 0 20px 20px;
        box-shadow: 0 4px 30px rgba(0, 80, 100, 0.08);
        background-color: #fff;
        border-radius: 8px;
        width: 100%;
        .username {
          font-weight: 600;
        }
        .answer-content {
          margin-top: 5px;
          line-height: 24px;
          word-wrap: break-word;
          p {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .bottom {
    background: #fff;
    position: fixed;
    bottom: 50px;
    .send-msg {
      position: relative;
      .send-msg-input {
        :deep(.el-textarea__inner) {
          padding-right: 100px;
          resize: none;
        }
        --el-input-border-radius: 12px;
      }
      .send-msg-btn {
        border-radius: 12px;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
}
</style>
